import React, { Fragment } from 'react';
import { Drawer, Table } from 'antd';
import AddUser from './AddUser';

class Demo2 extends React.PureComponent {
  constructor(props) {
    super(props);
    console.log("constructor");
    this.state = {
      tableData: [],
    };
  }

  componentDidMount() {
    console.log('componentDidMount');

    const url = "http://127.0.0.1:8089/user/user";
    fetch(url, {
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('Authorization')
      },
    })
      .then(response => response.json())
      .then((res) => {
        console.log('API Response:', res);
        const { data } = res;
        // 确保每条记录都有唯一的 userId
        console.log('Table Data:', data);
        this.setState({ tableData: data });
      })
      // .catch(error => console.error('Error fetching data:', error));
  }

  // eslint-disable-next-line react/sort-comp
  columns = [
    {
      title: '用户ID',
      dataIndex: 'userId',
      key: 'userId',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '性别',
      dataIndex: 'userSex',
      key: 'userSex',
    },
    {
      title: '部门',
      dataIndex: 'userDeptName',
      key: 'userDeptName',
    },
    {
      title: '部门编号',
      dataIndex: 'userDeptId',
      key: 'userDeptId',
    },
    {
      title: '操作',
      key: 'action', // 修改 key 值以避免与 dataIndex 冲突
      render: (text, record) => (
        <>
          <a href="#" key={`${record.userId}-edit`}>编辑</a>
          <a href="#" key={`${record.userId}-delete`}>删除</a>
        </>
      ),
    },
  ];

  handleOpenDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    console.log("render");
    return (
      <Fragment>
        {/* eslint-disable-next-line react/button-has-type */}
        <button type="Primary" onClick={this.handleOpenDrawer}>
          新增
        </button>
        <Table
          dataSource={this.state.tableData}
          columns={this.columns}
          // rowKey={(record) => record.userId} // 使用 userId 作为唯一标识符
        />;
        <Drawer title="Basic Drawer" placement="right" onClose={this.onClose} open={this.state.visible}>
          <AddUser />
        </Drawer>


      </Fragment>
    );
  }
}
export default Demo2;
// Todo:这里没写记得明天改，改不过来上面是对的


// import React, { Fragment } from 'react';
// import { Drawer, Table } from 'antd';
// import AddUser from './AddUser';
// import DeleteUser from './DeleteUser';
//
// class Demo2 extends React.PureComponent {
//   constructor(props) {
//     super(props);
//     console.log("constructor");
//     this.state = {
//       tableData: [],
//     };
//   }
//
//   componentDidMount() {
//     console.log('componentDidMount');
//
//     const url = "http://127.0.0.1:8089/user/user";
//     fetch(url, {
//       method: 'GET',
//       headers: {
//         Authorization: localStorage.getItem('Authorization')
//       },
//     })
//       .then(response => response.json())
//       .then((res) => {
//         console.log('API Response:', res);
//         const { data } = res;
//         // 确保每条记录都有唯一的 userId
//         console.log('Table Data:', data);
//         this.setState({ tableData: data });
//       })
//     // .catch(error => console.error('Error fetching data:', error));
//   }
//
//   // eslint-disable-next-line react/sort-comp
//   columns = [
//     {
//       title: '用户ID',
//       dataIndex: 'userId',
//       key: 'userId',
//     },
//     {
//       title: '用户名',
//       dataIndex: 'username',
//       key: 'username',
//     },
//     {
//       title: '昵称',
//       dataIndex: 'nickname',
//       key: 'nickname',
//     },
//     {
//       title: '性别',
//       dataIndex: 'userSex',
//       key: 'userSex',
//     },
//     {
//       title: '部门',
//       dataIndex: 'userDeptName',
//       key: 'userDeptName',
//     },
//     {
//       title: '部门编号',
//       dataIndex: 'userDeptId',
//       key: 'userDeptId',
//     },
//     {
//       title: '操作',
//       key: 'action',
//       render: (text, record) => (
//         <>
//           <a href="#" key={`${record.userId}-edit`}>编辑</a>
//           <a href="#" key={`${record.userId}-delete`} onClick={() => this.handleDelete(record.userId)}>
//             删除
//           </a>
//         </>
//       ),
//     },
//   ];
//
//   handleDelete = (userId) => {
//     this.setState({ deletingUserId: userId, deleteModalVisible: true });
//   };
//
//   handleDeleteCancel = () => {
//     this.setState({ deleteModalVisible: false });
//   };
//
//   handleDeleteConfirm = (userId) => {
//     // 发送请求到后端API删除用户
//     console.log(`Deleting user with ID: ${userId}`);
//     // 假设删除成功后，更新状态以重新加载用户列表
//     this.setState({ deleteModalVisible: false });
//   };
//
//   render() {
//     console.log("render");
//     return (
//       <Fragment>
//         <button type="Primary" onClick={this.handleOpenDrawer}>
//           新增
//         </button>
//         <Table
//           dataSource={this.state.tableData}
//           columns={this.columns}
//           // rowKey={(record) => record.userId} // 使用 userId 作为唯一标识符
//         />
//         <Drawer title="Basic Drawer" placement="right" onClose={this.onClose} open={this.state.visible}>
//           <AddUser />
//         </Drawer>
//         <DeleteUser
//           visible={this.state.deleteModalVisible}
//           onCancel={this.handleDeleteCancel}
//           onConfirm={this.handleDeleteConfirm}
//           userId={this.state.deletingUserId}
//         />
//       </Fragment>
//     );
//   }
// }
// export default Demo2;
